<template>
  <div cla>
    <!-- 引入公共头部组件 -->
    <HeaderMenu
      title="工单管理"
      leftText="返回"
      rightText="新建"
      @rightEvent="onClickRight"
    />
    <div style="width: 100%;">
      <!-- 搜索区域 -->
      <van-search
        shape="round"
        background="#509DF7"
        show-action
        placeholder="请输入标题"
        @search="search"
        v-model="GLtitle"
        @clear="clear"
      >
        <div slot="action" @click="onSearch" style="color:#fff">搜索</div>
      </van-search>
      <div class="formalBox">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoading"
        >
          <div
            class="boxFormal"
            v-for="item in GLcardData"
            :key="item.Id"
            @click="sapleEdit(item)"
          >
            <div class="cardName" style="font-size:14px">
              {{ item.SWOTitle }}
            </div>
            <div class="code" style="font-size:14px">
              <div style="padding-right: 30px">
                完成日期:{{
                  item.EndTimeRqstd
                    ? item.EndTimeRqstd.substring(0, 10)
                    : "未完成"
                }}
              </div>
              <div style="font-size:14px">工单类型:{{ item.SWOType }}</div>
            </div>
            <div style="padding-left: 10px;">
              <van-button
                size="mini"
                @click.stop="GLcardDataClickUpdate(item)"
                style="margin-top: 12px;"
                type="info"
                >编辑</van-button
              >
              <van-button
                size="mini"
                @click.stop="GLcardDataClickDelete(item)"
                style="margin-top: 12px;"
                type="danger"
                >删除</van-button
              >
            </div>
          </div>
        </van-list>
      </div>
    </div>

    <!-- <PaginationCom :pagination="pagination" :Total="Total" :thisOjb="this" /> -->
    <!-- <Edit :readonly="readonly" :parentObj="this" ref="edit" /> -->
    <!-- <myWork :readonly="readonly" :parentObj="this" ref="myWork" /> -->
    <!-- <work :readonly="readonly" :parentObj="this" ref="work" /> -->
    <!-- <feedback :parentObj="this" ref="feedback" /> -->
  </div>
</template>

<script>
// import PaginationCom from "../../components/PaginationCom.vue";
// 引入公共头部组件
import HeaderMenu from "../../components/VolHeaderMenu.vue";
import { Card } from "vant";
import {
  Search,
  NavBar,
  Dialog,
  Pagination,
  SwipeCell,
  Empty,
  Icon,
  Tag
} from "vant";
// import Edit from "./Edit.vue";
// import work from "./work.vue";

//     import feedback from "./feedback.vue";
// import myWork from "./myWork.vue";

export default {
  components: {
    // myWork,
    "van-tag": Tag,
    // PaginationCom,
    "van-icon": Icon,
    "van-swipe-cell": SwipeCell,
    "van-empty": Empty,
    "van-pagination": Pagination,
    "van-nav-bar": NavBar,
    "van-card": Card,
    "van-search": Search,
    // 注册公共头部组件
    HeaderMenu
    // Edit,
    //     feedback
    // work
  },

  data() {
    return {
      image: require("../../assets/search.png"),
      active: 0,
      readonly: false,
      loading: false,
      finished: false,
      PageRows: 10,
      pagination: {
        // 当前页数
        current: 1,
        // 每页条数
        pageSize: 5,
        // 总条数
        Total: 0,
        showTotal: 0
      },
      cardData: [],
      SWOloading: false,
      SWOfinished: false,
      SWOPageRows: 10,
      SWOTitle: "",
      Total: 0,
      Keyword: "",
      data: [],
      MycardData: [],
      Myloading: false,
      Myfinished: false,
      MyPageRows: 10,
      userId: "",
      GLtitle: "",
      // 是否加载状态
      loading: false,
      // 数据是否加载完成
      finished: false,
      GLPageRows: 10,
      // 工单列表数据
      GLcardData: [],
      dataList: [],
      active2: 0,
      queryParamfeed: [
        {
          condition: "CustomerName"
        }
      ],
      queryParam: [
        {
          condition: "CustomerName",
          Keyword: ""
        }
      ]
    };
  },
  async created() {
    //  去除加载状态
    this.loading = false;
    
  },
  
  watch: {
    $route(a, b) {
      //获取工单管理列表数据
      this.getGLcardData();
    }
  },
  // mounted() {
  //    //获取工单管理列表数据
  //     this.getGLcardData();
  // },
  methods: {
    // 搜索按钮搜索
    onSearch() {
      this.search();
    },
    //搜索
    search(value) {
      // 页数重置
      this.pagination.current = 1;
      // 列表数据清空
      this.GLcardData = [];
      // 是否显示页面加载
      this.loading = true;
      // 重置化没有加载完成
      this.finished= false
      // 开始初始化onloading函数
      this.onLoading();
    },
    // 工单管理页点击事件
    workOrderManageClick() {
      this.$router.push({
        path: "/workOrder/workOrderManage"
        // query: { Id: item.Id }
      });
    },
    // 我的工单页点击事件
    myWorkOrderClick() {
      this.$router.push({
        path: "/workOrder/myWorkOrder"
        // query: { Id: item.Id }
      });
    },

    // 工单列表编辑
    GLcardDataClickUpdate(item) {
      // 编辑
      this.$router.push({
        path: "/service/work",
        query: { readonly: 1, Id: item.Id, urlType:1 }
      });
    },
    // 工单列表删除
    GLcardDataClickDelete(item) {
      // 删除（
      Dialog.confirm({
        message: "确定要删除吗",
         confirmButtonColor:'#1989fa'
      })
        .then(() => {
          this.http
            .post("/SWOManagement/ServiceWorkOrderMain/DeleteData", [item.Id])
            .then(resJson => {
              if (resJson.Success) {
                this.$toast("删除成功");
                // 清空工单列表数据
                this.GLcardData = [];
                // 页数初始化
                this.pagination.current = 1;
                this.getGLcardData();
              } else {
                this.$toast("删除失败");
                this.loading = false;
              }
            });
        })
        .catch(() => {
          console.log(123);
        });
    },
    statype(str) {
      if (str == 0) {
        return "primary";
      }
      if (str == 1) {
        return "success";
      }
      if (str == 2) {
        return "danger";
      }
    },
    status(str) {
      if (str == 0) {
        return "申请中";
      }
      if (str == 1) {
        return "审批通过";
      }
      if (str == 2) {
        return "驳回";
      }
    },
    // 列表加载
    async onLoading() {
      this.loading = true; //防止第一页重复加载
      // this.pagination.current++;
      // 获取工单列表数据
      this.getGLcardData();
    },
    MyonLoad() {
      console.log("object");
      this.MyPageRows += 20;
      this.getMyWorkorderList();
    },
    SWOonLoad() {
      console.log("object");
      this.SWOPageRows += 20;
      this.getWorkorderList();
    },
    GLtitlesearch() {},
    mywork(item) {
      this.$router.push({
        path: "/service/myWork",
        query: { Id: item.Id }
      });
      // this.$refs.myWork.openForm(item);
    },

    // 获取工单管理列表数据
    getGLcardData() {
      // 清除工单列表数据
      this.GLcardData = [];
      // 清空检索提示
      this.isSearchOrderManage=false
      this.http
        .post(
          "/SWOManagement/ServiceWorkOrderMain/GetDataListByMySelfCustomer",
          {
            // 当前页数
            PageIndex: this.pagination.current,
            // 每页显示10条
            PageRows: 10,
            SortField: "StartTime",
            SortType: "desc",
            Search: [
              {
                condition: "SWOTitle",
                Keyword: this.GLtitle
              }
            ]
          }
        )
        .then(resJson => {
          if (resJson.Success) {
            let data = resJson.Data;
            // // 赋值总条数
            this.pagination.Total = resJson.Total;
            this.GLcardData = this.GLcardData.concat(data);
            this.loading = false;
            if (this.GLcardData.length >= this.pagination.Total) { 
              this.finished=true
            }
            // if (this.GLcardData.length == 0) {
            //   // 数据全部加载完成
            //   this.finished = true;
            //   this.loading = false;
            // } else {
            //   // 说明还有过多的数据
            //   if (this.GLcardData.length < this.pagination.Total) {
            //     this.pagination.showTotal =
            //       this.pagination.current * this.GLcardData.length;
            //     let arr = resJson.Data;
            //     // 拼接数组 赋值工单列表数据
            //     this.GLcardData = this.GLcardData.concat(arr);
            //     // 清除加载状态
            //     this.loading = true;
            //     this.finished = false;
            //   } else if (this.GLcardData.length == this.pagination.Total) {
            //     // 数据全部加载完成
            //     // 清除加载状态
            //     this.loading = false;
            //     this.finished = true;
            //     // **************************************************
            //     // 注意，，必须return  否则接口回频繁请求
                return;
            //   }
            // }
          }
        });
    },
    onRightWork() {
      this.readonly = false;
      this.$router.push({
        path: "/service/work",
        query: { readonly: this.readonly ? 1 : 0 }
      });
      // this.$refs.work.openForm();
    },
    // 工单列表详情
    sapleEdit(item) {
      this.readonly = true;
      // this.$refs.work.openForm(item);
      this.$router.push({
        path: "/service/work",
        query: { Id: item.Id, readonly: 2, urlType:2 } //查看
      });
    },
    op() {
      this.http.post("/Base_Manage/Home/GetOperatorInfo").then(resJson => {
        if (resJson.Success) {
          this.userId = resJson.Data.UserInfo.Id;
        }
      });
    },

    // getWorkorderList() {
    //   this.http
    //     .post(
    //       "/SWOManagement/ServiceWorkOrderMain/GetDataListByMoreCondition",
    //       {
    //         PageIndex: 1,
    //         PageRows: this.SWOPageRows,
    //         SortField: "CreateTime",
    //         SortType: "desc",
    //         Search: [
    //           {
    //             Condition: "CreatorId",
    //             Keyword: this.userId
    //           },
    //           {
    //             Condition: "SWOTitle",
    //             Keyword: this.SWOTitle
    //           }
    //         ]
    //       }
    //     )
    //     .then(resJson => {
    //       console.log("获取工单管理列表");
    //       if (resJson.Success) {
    //         this.cardData = resJson.Data;

    //         this.SWOloading = false;
    //         if (this.cardData.length >= resJson.Total) {
    //           this.SWOfinished = true;
    //         } else {
    //           this.SWOfinished = false;
    //         }
    //       }
    //     });
    // },

    feed(item) {
      if (!item.SampleStatus) {
        this.$refs.feedback.openForm(item.Id);
      }
    },
    call2(key) {
      console.log(key);
      if (key == 0) {
        this.getWorkorderList();
      } else if (key == 1) {
        this.getMyWorkorderList();
      }
    },
    call(name) {
      if (name == 0) {
        this.queryParam = [
          {
            condition: "CustomerName"
          }
        ];
        this.getDataList();
      } else if (name == 1) {
        this.queryParam = [
          {
            condition: "CustomerName"
          },
          { condition: "DeliverStatus", Keyword: 2 }
        ];
        this.getDataList();
      } else if (name == 2) {
        this.getGLcardData();
      } else if (name == 3) {
        this.getWorkorderList();
        // this.getMyWorkorderList();
      }
      // console.log(name);
      // if (name == 1) {
      //   this.queryParam = [
      //     {
      //       Condition: "CustomerName"
      //     },
      //     {
      //       condition: "DeliverStatus",
      //       Keyword: 2
      //     }
      //   ];
      // } else {
      //   this.queryParam = [
      //     {
      //       Condition: "CustomerName"
      //     }
      //   ];
      // }
      // this.getDataList();
    },
    paginationchange(a) {
      // a:当前选中页码
      this.pagination.current = a;
      this.getDataList();
    },
    clear() {
      // this.queryParam = [
      //   {
      //     condition: "CustomerName"
      //   }
      // ];
      this.queryParam = [
        { condition: "cCusName" },
        { condition: "cCusType", keyword: null }
      ];
      // 清空工单列表数据
      this.GLcardData = [];
      // 页数初始化
      this.pagination.current = 1;
       // 重置化没有加载完成
      this.finished= false
      // 重新提示加载状态
      this.loading = true;
      this.getGLcardData();
    },
    // 工单创建
    onClickRight() {
      this.$router.push({ path: "/service/work", query: { readonly: 0, urlType:0 } });
    },
    //弹出页面
    Edit(item) {
      // this.$refs.edit.openForm(item.Id);

      // console.log(this.$router);
      if (item.ApprovalStatus == 1) {
        this.readonly = true;
      } else {
        this.readonly = false;
      }
      this.$router.push({
        path: "/service/Edit",
        query: { Id: item.Id, readonly: this.readonly ? 1 : 0 }
      });
    },
    //反馈搜索
    searchfeed(value) {
      // this.queryParam[0].Condition = "CustomerName";
      this.queryParam[0].Keyword = value;
      this.getDataList();
    },
    SWOTitlesearch(value) {
      this.SWOTitl = value;
      this.getWorkorderList();
    },
    clearfeed() {
      this.queryParam = [
        {
          condition: "CustomerName"
        }
      ];
      this.getDataList();
    }
    // getDataList() {
    //   this.selectedRowKeys = [];

    //   this.loading = true;
    //   this.http
    //     .post(
    //       "SampleManagement/SPL_SampleApplyMain/GetDataListByMySelfAndMoreCondition",
    //       {
    //         PageIndex: 1,
    //         PageRows: this.PageRows,
    //         SortField: "CreateTime",
    //         SortType: "desc",
    //         Search: this.queryParam
    //       }
    //     )
    //     .then(resJson => {
    //       this.data = resJson.Data;
    //       this.Total = resJson.Total;
    //       this.loading = false;
    //       if (this.data.length >= resJson.Total) {
    //         this.finished = true;
    //       } else {
    //         this.finished = false;
    //       }
    //       // console.log(this.data);
    //     });
    // }
  }
};
</script>

<style scoped>
/* 覆盖van-button的默认样式 */
.van-button {
  padding: 0 10px 0 10px !important;
}
.search-none {
  height: 0 !important;
}
.worktopitem {
  display: flex;
  justify-content: center;
  align-items: center;
}
.workradio {
  border-radius: 50%;
  width: 40%;
  height: 55%;
  background-color: rgba(255, 244, 234, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
}
.workradio img {
  height: 50px;
  width: 70%;
}
.workbottomimg img {
  width: 95%;
  margin-top: -14px;
}
.worktopimg img {
  width: 65%;
  margin-top: -20px;
}
.worklisttop {
  margin: 15px auto;
  width: 93%;
  height: 120px;
  display: flex;
  justify-content: space-between;
  border-radius: 10px;
  padding: 5px 5px 5px 0;
  background: linear-gradient(to bottom right, #05b0ed, #17dcba);
}
.worklistbottom {
  margin: 0 auto;
  padding: 5px 5px 5px 0;
  width: 93%;
  height: 120px;
  display: flex;
  justify-content: space-between;
  border-radius: 10px;
  background: linear-gradient(180deg, #e99bfc 0%, #b560ff 100%);
}

.DeliverAddress {
  margin-left: 10px;
  padding-bottom: 10px;
}
.state {
  display: flex;
  justify-content: space-between;
}
.pagination {
  position: absolute;
  bottom: 5px;
  right: 20%;
}
.delete {
  padding-top: 10px;
  background-color: #fff;
  padding-right: 20px;
  height: 60px;
  font-size: 60px;
  color: red;
}
.outerBox {
  height: calc(100vh - 140px);
  padding-bottom: 60px;
  box-sizing: border-box;
  overflow: auto;
}
.btn {
  position: absolute;
  bottom: 0;
  right: 0;
}
.sampleName {
  font-weight: 600;
  line-height: 1.8;
  width: 240px;
  color: #000;
  font-size: 18px;
  margin-left: 10px;
  margin-top: 5px;
}
.MySamplebox {
  box-shadow: 2px 2px 5px #ccc;
  border-radius: 5px;
  position: relative;
  width: 95%;
  /* height: 85px; */
  margin: 3px auto;
  /* display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center; */
  margin-bottom: 10px;
}
/* img {
      width: 100px;
      height: 100px;
    } */

.fixedbox {
  position: fixed;
  bottom: 0;
  right: 0;
  /* height: 50px; */
  background: #fff;
  width: 100vw;
}
.pagination {
  position: absolute;
  bottom: 5px;
  right: 20%;
}
.code {
  display: flex;
  justify-content: start;
  margin-left: 10px;
  color: #777;
}
.Foricon {
  color: blue;
  position: absolute;
  right: 8px;
}
.btn {
  position: absolute;
  bottom: 0;
  right: 0;
}

.formalBox {
  height: calc(100vh - 150px);
  padding-bottom: 50px;
  box-sizing: border-box;
  overflow: auto;
}
.formalBox::-webkit-scrollbar{
    display:none
}
.cardName {
  padding-top: 10px;
  /* margin-left: 10px; */
  margin-bottom: 5px;
  color: #000000;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.8;
  padding-left: 10px;
}
.companyAddress {
  padding-top: 10px;
  margin-left: 10px;

  color: #777;
  /* font-weight: 600;
      font-size: 18px; */
  line-height: 1.3;
}
.boxFormal {
  box-shadow: 2px 2px 5px #ccc;
  border-radius: 5px;
  position: relative;

  width: 95%;
  /* height: 80px; */
  padding-bottom: 10px;
  margin: 3px auto;
  margin-bottom: 10px;
}
/* .Father {
      display: flex;
    } */
</style>
